<template>
    <div>
        <Row :gutter="20" class="margin-bottom-20">
            <i-col :span="5" v-if="faceAccess">
                <Select clearable placeholder="识别门禁" v-model="searchModel.device_id" @on-change="handleSearch">
                    <Option
                        v-for="(fa, index) in faceAccess"
                        :key="fa.id"
                        :value="fa.id">
                        {{fa.description || '门禁' + index}}
                    </Option>
                </Select>
            </i-col>
            <i-col :span="5">
                <DatePicker
                    class="width-100p"
                    type="datetimerange"
                    format="yyyy-MM-dd"
                    :options="options"
                    v-model="searchModel.date"
                />
            </i-col>
            <i-col :span="5" v-if="faceAccess">
                <i-input placeholder="房间号" v-model="searchModel.room_name" @keydown.enter.native="handleSearch"></i-input>
            </i-col>
            <i-col :span="5">
                <i-input placeholder="姓名/手机号码" v-model="searchModel.user" @keydown.enter.native="handleSearch"></i-input>
            </i-col>
            <i-button @click="handleSearch">搜索</i-button>
        </Row>
        <Table
            :columns="columns"
            :data="tableData"
            :loading="loading">
        </Table>
        <div class="text-center margin-top-20">
            <Page
                show-total
                :current.sync="pagination.current"
                :total="pagination.total"
                :page-size="pagination.limit"
                @on-change="initData"
            />
        </div>
        <member-detail
            :visible.sync="memberDetail.visible"
            :file-name="memberDetail.fileName"
            :name="memberDetail.name"
            :phone="memberDetail.phone"
            :user-id="memberDetail.userId"
            :role-id="memberDetail.roleId">
        </member-detail>
    </div>
</template>

<script>
    /**
     * 房源 - 门禁开门记录
     */
    import debounce from 'lodash/debounce'
import { http, api } from '@/libs/http'
import { memberDetail } from '@/components'
import { faceAccessAuthType } from '@/libs/const'
import { date, searchTimeRange, now, quarterAgo, generateShortcuts } from '@/libs/date'

export default {
      name: 'home-access-control-open-history',
      props: {
        deviceInfo: Object,
        homeId: Number,
        faceAccess: Array
      },
      components: {
        memberDetail
      },
      created () {
        if (this.deviceInfo) this.searchModel.device_id = this.deviceInfo.id
        this.initData()
      },
      data () {
        return {
          memberDetail: {
            userId: 0,
            roleId: 0,
            visible: false,
            fileName: '',
            name: '',
            phone: ''
          },
          loading: false,
          tableData: [],
          baseColumns: [
            {
              title: '开门人',
              render: (h, p) => {
                const { relation_name, relation_role } = p.row
                return <a href='javascript:;' onClick={() => this.handlePhoto(p.row)}>
                                [{faceAccessAuthType[relation_role] || '未知'}]
                  {relation_name}
                </a>
              }
            },
            {
              title: '开门时间',
              render: (h, p) => {
                return <span>{date(p.row.open_time)}</span>
              }
            }
          ],
          pagination: {
            current: 1,
            total: 0,
            limit: 20
          },
          searchModel: {
            date: [ quarterAgo, now ],
            user: '',
            device_id: '',
            room_name: ''
          },
          options: {
            shortcuts: generateShortcuts()
          }
        }
      },
      computed: {
        columns () {
          const { baseColumns } = this
          if (this.faceAccess) return [ { title: '识别门禁', key: 'device_name' }, ...baseColumns ]
          return baseColumns
        }
      },
      methods: {
        handleSearch: debounce(function () {
          this.pagination.current = 1
          this.initData()
        }, 200),
        generateQuery () {
          const { current, limit } = this.pagination
          const { date, user, device_id, room_name } = this.searchModel
          const [ open_time_begin, open_time_end ] = searchTimeRange(date)
          const query = {
            limit,
            home_id: this.homeId,
            open_time_end,
            open_time_begin,
            room_name: room_name || null,
            device_id: device_id || null,
            offset: (current - 1) * limit
          }
          if (user) {
            if (/^\d+$/g.test(user)) {
              query.phone = user + ''
            } else {
              query.name = user
            }
          }
          return query
        },
        async initData () {
          try {
            this.loading = true
            const query = this.generateQuery()
            const res = await http.fetch(this, api.face_access_open_history, null, query)
            if (res) {
              this.pagination.total = res.count
              this.tableData = res.rows
            }
          } catch (err) {
            console.log(err)
          } finally {
            this.loading = false
          }
        },
        handlePhoto ({oss_id, relation_id, relation_role, relation_name, relation_phone}) {
          this.memberDetail.visible = true
          this.memberDetail.fileName = oss_id
          this.memberDetail.userId = relation_id
          this.memberDetail.roleId = relation_role
          this.memberDetail.name = relation_name
          this.memberDetail.phone = relation_phone
        }
      }
    }
</script>